<template>
  <el-container style="  margin-left: 5px;">
    <el-row style="position: inherit;  margin-bottom: 5px;  margin-top: 10px;">
    </el-row>
    <el-container>
      <el-aside style=" margin-left: 10px;  min-width: 50%;  background: rgba(194,83,255,0);">
        <div style=" display: flex;   height: 100%;">
          <div
            style=" height: 100%;  width: 100%;  border-radius: 4px;  overflow-y: hidden;  overflow-x: hidden;  margin-left: -23px; display: inline-block;  ">
            <div>
              <div
                style="margin-top: 10px;  margin-bottom: 20px;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11), 0 0 6px rgba(0, 0, 0, 0.05);">
                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 12px;">
                      <span
                        style="display: block; margin-top: 22px;margin-left: 6px;  margin-bottom: 20px;  font-size: 20px;">员工：</span>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <el-input v-model="this.recordEmployeeNumber" :disabled="true"
                              style="width: 100px; height: 40px;margin-top: 22px; font-size: 20px;"
                    ></el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span style="display: block; margin-top: 22px;  font-size: 20px;">手牌号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.handBrand " :disabled="true"
                              style="width: 100px; height: 40px;margin-top: 22px;  font-size: 20px;">
                    </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span style="display: block; margin-top: 22px;font-size: 20px;">房间号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.seat " :disabled="true"
                              style="width: 100px; height: 40px;;margin-top: 22px;font-size: 20px;">
                    </el-input>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--          展示商品表格-->
            <div style="height: 600px;  font-size: 25px;  margin-top: 60px;  margin-right: 13px;">
              <el-table :cell-class-name="tableRowClassName" :show-header="false" :data="detailsList" empty-text="玉泉宫" height="400" border
                        style="margin-top: 1px;  overflow-y: hidden;  overflow-x: hidden;  position: inherit;  font-size: 18px;width: 1150px">
             <el-table-column prop="entryName" label="商品名称" width="180" align="center">
                </el-table-column>
                <el-table-column prop="quantity" label="购买数量" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.quantity }}个</div>
                  </template>
                </el-table-column>
                <el-table-column sortable label="消费金额" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.totalAmount }}元</div>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <el-button type="warning" plain @click="jianshao(scope.row.index)">减少</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain @click.prevent.stop.native="open2=true">加钟
            </el-button>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain   @click.prevent.stop.native="back()">返回主页
            </el-button>
          </div>
          <!--分类条-->
          <div style="display: inline-block;   height: 400px;  width: 24%;">
            <div>
              <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <el-card
                  style="margin-top: 30px;  margin-left: 5px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #ea0d0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListam()">
                  <span style="   line-height:80px;  font-size: 22px;">按摩</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #eab30d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListaj()">
                  <span style=" line-height: 80px;  font-size: 22px;">按脚</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #74ea0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListxx()">
                  <span style=" line-height: 80px;  font-size: 22px;">小项</span>
                </el-card>
              </div>

            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main style="   height: 100%;  margin-right: 10px;  margin-top: 15px;  width: 100%;">
          <div style="   height: 760px;">
            <el-row style="  text-align: center;">
              <el-col v-for="(item,index) in projectList" :span="8">
                <el-button plain
                           style="height: 123px;width: 212px;margin-top: 3px;padding: 0;font-size: 22px;  border: 3px solid #87CEFA;"
                           type="primary" @click="open1=true ; Aitem=item">
                  <div>{{ item.entryName }}</div>
                  <div>{{ item.unitPrice }}元</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-main>
        <el-dialog :visible.sync="open1" width="50%" style="margin-top: 200px;" append-to-body>
          <div style="text-align: center;">
            <h1 style="font-size: 50px;">是否增加本商品</h1>
          </div>
          <div>
            <el-button type="primary" @click="xz(Aitem);open1=false" style="margin-top: 20px; width: 200px; height: 80px; font-size: 30px;">是</el-button>
            <el-button type="success" @click="open1=false" style="margin-top: 20px; width: 200px; height: 80px; font-size: 30px; float: right;">否</el-button>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="open2" width="50%" style="margin-top: 200px;" append-to-body>
          <div style="text-align: center;">
            <h1 style="font-size: 50px;">是否加钟</h1>
          </div>
          <div>
            <el-button type="primary" @click="jz();open2=false" style="margin-top: 20px; width: 200px; height: 80px; font-size: 30px;">是</el-button>
            <el-button type="success" @click="open2=false" style="margin-top: 20px; width: 200px; height: 80px; font-size: 30px; float: right;">否</el-button>
          </div>
        </el-dialog>
      </el-container>
    </el-container>
  </el-container>
</template>




<!--

<template>
  <el-container class="allpage">
    <el-row class="position-fixed">
    </el-row>
    <el-container>
      <el-aside class="shaoboaside1">
        <div class="shaoaside-content">
          <div class="shaoaside-left">
            <div>
              <div class="zuoce">
&lt;!&ndash;                <el-row :gutter="10">
                  <el-col :span="9">
                    <el-button type="primary" plain @click="handleAdd" class="add_btn2">录入信息</el-button>
                  </el-col>
                  <el-col :span="9">
                    <el-button type="primary" plain @click="clear()" class="add_btn2">清空列表</el-button>
                  </el-col>
                </el-row>&ndash;&gt;

                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span style="display: block; margin-top: 22px;" class="m1">员工：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input
                      class="input"
                      v-model="this.recordEmployeeNumber"
                      :disabled="true"
                      style="width: 100px; height: 40px;"
                    ></el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 20px;">
                      <span style="display: block; margin-top: 22px;" class="m">手牌号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input
                      class="input"
                      v-model="this.handBrand "
                      :disabled="true"
                      style="width: 100px; height: 40px;"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 20px;">
                      <span style="display: block; margin-top: 22px;" class="m">房间号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input
                      class="input"
                      v-model="this.seat "
                      :disabled="true"
                      style="width: 100px; height: 40px;"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </div>
            </div>
            &lt;!&ndash;          展示商品表格&ndash;&gt;
            <div class="scroll">
              <el-table
                :row-style="rowStyle"
                :cell-class-name="tableRowClassName"
                :show-header="false"
                :data="detailsList"
                empty-text="玉泉宫"
                height="700"
                border
                style="width: 1150px"
                class="listtable">
                <el-table-column
                  prop="entryName"
                  label="商品名称"
                   align="center">
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="购买数量" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.quantity }}个</div>
                  </template>
                </el-table-column>
                <el-table-column
                  sortable
                  label="消费金额" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.totalAmount }}元</div>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <el-button type="warning" plain @click="jianshao(scope.row.index)">减少</el-button>
                  </template>
                </el-table-column>

              </el-table>

            </div>
          </div>
          &lt;!&ndash;分类条&ndash;&gt;
          <div class="shaoaside-right">
            <div>
              &lt;!&ndash;            <el-card class="first1" style="font-size: 18px">&ndash;&gt;
              &lt;!&ndash;              <span class="juzhong">全部商品分类</span>&ndash;&gt;
              &lt;!&ndash;            </el-card>&ndash;&gt;
              <div class="zhonglei">
                <el-card class="first" style="font-size: 18px" @click.prevent.stop.native="getListam()">
                  <span class="juzhong">按摩</span>
                </el-card>
                <el-card class="first2" style="font-size: 18px" @click.prevent.stop.native="getListaj()">
                  <span class="juzhong">按脚</span>
                </el-card>
                <el-card class="first3" style="font-size: 18px" @click.prevent.stop.native="getListxx()">
                  <span class="juzhong">小项</span>
                </el-card>

              </div>
              <div
                style="margin-top: 180px;width: 180px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <el-button class="leibie" type="primary" plain @click="jz()">加钟</el-button>
                <el-button class="leibie4" type="primary" plain @click.prevent.stop.native="back()">返回主页</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-dialog :title="title" :visible.sync="open" width="600px" style="margin-top: 200px;" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row justify="start">
            <el-col>
              <el-form-item label="手牌号" prop="handBrand">
                <el-input v-model="form.handBrand" placeholder="请输入手牌号" style="width: 100%;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="start">

            <el-col>
              <el-form-item label="房间号" prop="roomNumber">
                <el-input v-model="form.seat" placeholder="请输入房间号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="start">
            <el-col>
              <el-form-item label="服务员" prop="waiter">
                <el-input v-model="form.recordEmployeeNumber" placeholder="请输入服务员"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="submitForm">完成录入</el-button>
        </div>
      </el-dialog>
      &lt;!&ndash;      商品展示&ndash;&gt;
      <el-container>
        <el-main class="shaomain">
          <div
            v-loading="loading">
            <el-row
              class="button-list2"

            >
              <el-col v-for="(item,index) in projectList" :span="8">
                <el-button plain
                           style="height: 123px;width: 251px;margin-top: 3px;padding: 0;"
                           type="primary"
                           class="button1"
                           @click="xz(item)"
                >
                  <div>{{ item.entryName }}</div>
                  <div>{{ item.unitPrice }}元</div>
                </el-button>

              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
-->

<script>
import {addDetails, listDetails} from "@/api/module/yzx/details";
import {listProject} from "@/api/module/yzx/project";

export default {
  name: "shangzhong",
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
  data() {
    return {
      Aitem: null,
      title1: "是否增加本商品",
      // 是否显示弹出层
      open1: false,
      // 是否显示弹出层
      open2: false,
      //记录单价
      price: null,
      //记录服务员号
      recordEmployeeNumber: null,
      //记录手牌号
      handBrand: null,
      //记录房间
      seat: null,
      entryName: null,
      note6: null,
      info: {},
      // 遮罩层
      loading: true,
      // 选中数组
      List1:[],
      Form1: {
        entryName: null,
        quantity: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        lockedState: null,
        //库中数据字段为1才是商品
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      detailsList1: [],
      detailsList2: [],
      // 项目信息表格数据
      projectList: [],
      projectList1: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数

      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams4: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.getList2();
  },
  methods: {
    back() {
      this.$router.push({path: "/jishi/index"});
    },
    getList2() {
      this.queryParams4.nextClockStatus = "1";
      listDetails(this.queryParams4).then(response => {
        this.detailsList2 = response.rows;
        this.detailsList2.forEach(item => {
          this.recordEmployeeNumber = item.recordEmployeeNumber;
          this.handBrand = item.handBrand;
          this.seat = item.seat;
          this.price = item.unitPrice;
          this.entryName = item.entryName;
          this.note6 = item.note6;
        })
      });
    },
    /** 查询消费详细列表 */
    getList() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮

    getListam() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListaj() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "05";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListxx() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "07";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    rowStyle(row, rowIndex){
      if (this.currentRowId === row.id) {
        // 此处返回选中行的样式对象，按需设置
        return {
          'background-color': 'rgba(94,180,251,0.18)',
          'color': 'rgb(47,46,46)'
        }
      }
    },
    clear() {
      this.reset();
      this.reset1();
    },

    reset1() {
      // 表单重置
      this.projectList1 = null;
    },
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加消费详细";
    },
    /* getList2() {
       this.queryParams3.nextClockStatus = "1";
       listDetails(this.queryParams3).then(response => {
         this.detailsList1 = response.rows;
         this.detailsList1.forEach(item => {
           this.recordEmployeeNumber = item.recordEmployeeNumber;
           this.handBrand = item.handBrand;
           this.seat = item.seat;
           this.price = item.unitPrice;
           this.entryName = item.entryName;
           this.note6 = item.note6;
         })
       });
       this.detailsList1=[];
     },*/
    jianshao(index){
      this.detailsList[index].quantity-=1;
      this.detailsList[index].totalAmount= this.detailsList[index].quantity * this.Form1.unitPrice
      if(this.detailsList[index].quantity==0){
        this.detailsList.splice(index,1);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    xz(row) {
      this.form.projectCode = row.projectCode;
      this.queryParams2.projectCode = row.projectCode;
      listProject(this.queryParams2).then(response => {
        this.List1 = response.rows;
        console.log(this.List1 + "gg0");
        this.List1.forEach(item => {
          console.log(item.entryName + "gg1");
          console.log(item.unitPrice + "gg3")
          this.Form1 = item;
        });
        console.log(this.Form1.entryName + "gg2"); // 在回调函数中执行
        if (this.detailsList.length === 0) {

          this.detailsList.push({

            entryName: this.Form1.entryName,
            handBrand: this.Form1.handBrand,
            projectCategory: this.Form1.projectCategory,
            quantity: 1,
            totalAmount: this.Form1.unitPrice,
          })
        } else {
          for (let i = 0; i < this.detailsList.length; i++) {
            if (this.detailsList[i].entryName === this.Form1.entryName) {
              this.detailsList[i].quantity = parseFloat(this.detailsList[i].quantity) + 1
              this.detailsList[i].totalAmount = this.detailsList[i].quantity * this.Form1.unitPrice
              break
            } else {
              if (i === this.detailsList.length - 1) {
                this.detailsList.push({
                  entryName: this.Form1.entryName,
                  handBrand: this.Form1.handBrand,
                  projectCategory: this.Form1.projectCategory,
                  // handState: this.List1.handState,
                  quantity: 1,
                  totalAmount: this.Form1.unitPrice,
                })
                i++
              }
            }
          }
        }
      });





    },
    jz() {
      if (this.detailsList.length > 0) {
        //批量插入
        for (var i = 0; i < this.detailsList.length; i++) {
          this.detailsList[i].projectCode=this.form.projectCode;
          this.detailsList[i].seat=this.seat;
          this.detailsList[i].handBrand=this.handBrand;
          this.detailsList[i].recordEmployeeNumber=this.recordEmployeeNumber;
          addDetails(this.detailsList[i]).then(response => {
          });
        }
        this.$modal.msgSuccess("点单成功");
        this.detailsList = [];
      } else
        this.$modal.msgError("未选择商品");
    },
    submitForm() {
      this.open = false;
      this.title = "添加消费详细";
    },
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.allpage {
  /*position: fixed;*/
  margin-left: 5px;

}

/*.daxiao{*/
/*  width: 100%; !* 设置卡片宽度 *!*/
/*  height: 100px; !* 设置卡片高度 *!*/
/*}*/
/*.el-header{*/
/*  margin-left: 10px;*/
/*  margin-right: 10px;*/
/*  margin-top: 20px;*/
/*  margin-bottom: 5px;*/
/*}*/

.shaoboaside1 {
  margin-left: 10px;
  min-width: 42%;
  background: rgba(194, 83, 255, 0);
}

.zhonglei {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

}

.shaomain {
  margin-right: 10px;
  margin-top: 15px;
  width: 100%;
  box-shadow: 0 100px 4px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.08);


}

.shaoboaside1, .shaomain {
  height: 850px;
}

.position-fixed {
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}

.listtable {
  margin-top: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
  font-size: 18px;
}

.aa {
  font-size: 25px;
}

.add_btn2 {
  margin-left: 3px;
  margin-top: 9px;
  min-width: 160px;
  min-height: 80px;
  font-size: 20px;
  /*margin-top: -12px;*/
  /*margin-left: -20px;*/
  border: 3px solid #322d2d;
}

.add_btn4 {
  min-width: 60px;
  min-height: 208px;
  font-size: 25px;
  border: 5px solid #322d2d;
}

.first {
  margin-top: 30px;
  margin-left: 5px;
  /*margin-right: -10px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #ea0d0d;
  border-top: none;
  border-bottom: none;
}

.first1 {
  margin-left: 5px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
}

.first2 {
  margin-left: 5px;
  margin-top: 7px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #eab30d;
  border-top: none;
  border-bottom: none;
}

.first3 {
  margin-left: 5px;
  margin-top: 7px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #74ea0d;
  border-top: none;
  border-bottom: none;
}

.buju {

}

.first4 {
  margin-left: 5px;
  margin-top: 7px;
  /*margin-right: -18px;*/
  text-align: center;
  width: 170px;
  height: 120px;
  border: 4px solid #0deaab;
  border-top: none;
  border-bottom: none;
}

.juzhong {
  line-height: 80px;
  font-size: 22px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

.add_btn3 {
  margin-top: 30px;
  min-width: 500px;
  min-height: 70px;
  right: 0px;
  font-size: 40px;

}

.button-list2 {
  text-align: center;
}

.shaoaside-content {
  display: flex; /* 设置弹性布局 */
}

.zuoce {
  margin-top: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11), 0 0 6px rgba(0, 0, 0, 0.05);
}

.shaoaside-left, .shaoaside-right {
  display: inline-block; /* 将 div 元素设置为行内块级元素 */
  height: 800px;
  /*border: 1px solid #ccc;*/
}

.shaoaside-left {
  height: 800px;
  width: 100%;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -23px;
}

.aside-right {
  height: 400px;
  width: 24%;
  /*background-image: url("~a");*/
  /*background: #322d2d;*/
}

.card {
  width: 100%;
  height: 100%;
}

.fenlei {
  height: 100px;
  margin-right: -18px;
  text-align: center;
  font-size: 30px;
}

.button1 {
  font-size: 22px;
  border: 3px solid #9c26b0;
}

.button5 {
  font-size: 22px;
  background-color: #ebd4ef;
  border: 3px solid #9c26b0;
}

.leibie {
  margin-top: 20px;
  margin-left: 11px;
  font-size: 25px;
  width: 160px;
  height: 100px;
  border: 3px solid #322d2d;
}

.leibie4 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 25px;
  width: 160px;
  height: 100px;
  border: 3px solid #322d2d;
}

.shuru {
  margin-top: -3px;
}

.scroll {
  height: 850px; /* 设置固定高度 */
  overflow-y: auto; /* 设置纵向滚动条 */
  font-size: 25px;
  margin-top: 60px;
  margin-right: 15px;
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.num {
  position: relative;
  left: -350px;
  right: -100px;
  top: 0;
}

.m1 {
  margin-left: 6px;
  margin-bottom: 20px;
  font-size: 20px;
}

.m {
  font-size: 20px;
}

.s {
  font-size: 18px;
}

.jishu {
  margin-left: 60px;
}

.input {
  margin-top: 22px;
  font-size: 20px;
}
</style>
